<template>
    <div class="body-container">
        <!--        头部部分-->
        <div class="header">
            <h3 class="page-header" style="margin-top: 20px;">
                管理员中心 <small>Welcome Administrator</small>
            </h3>
            <ol class="breadcrumb">
                <li @click="$router.push('/')"><a href="#">主页</a></li>
                <li @click="$router.push('/')"><a href="#">个人中心</a></li>
                <li class="active">学校考试管理</li>
            </ol>
        </div>

        <div class="content">
            <template>
                <el-table
                        v-loading="loading"
                        :data="examData.filter(data => !search || data.examName.toLowerCase().includes(search.toLowerCase()))"
                        style="width: 100%">
                    <el-table-column width="65"
                                     label="考试ID"
                                     prop="examId">
                    </el-table-column>
                    <el-table-column
                                     label="考试名称"
                                     prop="examName">
                    </el-table-column>
                    <el-table-column
                                     label="考试时间" width="150"
                                     prop="examStartTime">
                    </el-table-column>
                    <el-table-column
                                     label="考试时间(分钟)"
                                     prop="examLimitTime">
                    </el-table-column>
                    <el-table-column
                                     label="考试班级"
                                     prop="className">
                    </el-table-column>
                    <el-table-column label="是否防作弊" >
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.isAnticheat" type="success">开启防作弊</el-tag>
                            <el-tag v-else type="warning">未开启防作弊</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column width="80"
                                     label="考试总分"
                                     prop="totScore">
                    </el-table-column>
                    <el-table-column
                            align="right">
                        <template slot="header" slot-scope="scope">
                            <el-input
                                    v-model="search"
                                    size="mini"
                                    placeholder="输入考试名称搜索"/>
                        </template>
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">编辑
                            </el-button>

                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>

    </div>
</template>

<script>
    import {request} from "../../../api/request";

    export default {
        name: "ExamManage",
        data() {
            return {
                examData: [],
                search: '',
                loading: true,
                visible: true,
            }
        },
        methods: {
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            getCurrentTime(date) {
                return new Date(date).format('yyyy-MM-dd hh:mm:ss');
            }
        },
        mounted() {
            let that = this;
            request({
                method: 'post',
                url: '/admin/exam/all'
            }).then(function (data) {
                data = data.data;
                that.examData = data.data;
                for(let i = 0 ; i < that.examData.length; i ++ ) {
                    that.examData[i].examStartTime = that.getCurrentTime(that.examData[i].examStartTime);
                }
                setTimeout(_ => {
                    that.loading = false;
                }, 100);
            }).catch(function (err) {
                that.$message.error('获取考试信息失败');
            });
        }
    }
</script>

<style scoped>
    .body-container {
        width: 100%;
        height: 100%;
    }
</style>